<template>
	<view class="scan-image-container">
		<!-- wxml -->
		<view class="mask" v-if="imageUrl">
			<view class="blur-bg border-gray">
				<image :src="imageUrl" class="blur-image"></image>
				<view class="scan-line"></view>
			</view>

			<!-- 	<view class="content">
				<text class="title">识别中...</text>
				<view class="image-container">
					<image src="@/static/images/recognition/sure.png" class="scan-image"></image>
				</view>
			</view> -->

			<view class="bottom-tip">
				<text class="tip-text">菜单录入中，预计还需{{ remainTime }}s</text>
				<button class="cancel-btn" :disabled="disabled" @tap="cancelScan">取消</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { uNavigateBack } from '@/utils/uniUtils';
export default {
	data() {
		return {
			remainTime: 60,
			timer: null,
			imageUrl: null,
			disabled: false
		};
	},
	async onLoad({ imageUrl }) {
		this.imageUrl = imageUrl;
		this.disabled = true;
		// 模拟倒计时
		this.timer = setInterval(() => {
			this.remainTime = this.remainTime - 1;

			if (this.remainTime <= 0) {
				clearInterval(this.timer);
				// 识别完成逻辑
				uni.redirectTo({
					url: '/pages/workbench/recognition/list'
				});
				this.disabled = false;
			}
		}, 1000);
		console.log('imageUrl', imageUrl);
		this.$api
			.getScanGoodsListAPI({ url: imageUrl })
			// .getScanGoodsListAPI({ url: 'http://img1.baidu.com/it/u=901471344,3833516162&fm=253&app=138&f=JPEG?w=800&h=1131' })
			// .getScanGoodsListAPI({ url: 'https://img0.baidu.com/it/u=632612262,3342516263&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200' })
			.then((res) => {
				this.disabled = false;
				clearInterval(this.timer);
				const createList = encodeURIComponent(JSON.stringify(res.data));
				uni.redirectTo({
					url: '/pages/workbench/recognition/createGoods?createList=' + createList
				});
			})
			.catch((err) => {
				this.disabled = false;
				clearInterval(this.timer);
				this.$refs.uToast.show({ type: 'error', message: '解析失败请重试' });
				uni.redirectTo({
					url: '/pages/workbench/recognition/list'
				});
			});
	},
	methods: {
		cancelScan() {
			// 取消识别逻辑
			clearInterval(this.timer);
			uni.redirectTo({
				url: '/pages/workbench/recognition/list'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.scan-image-container {
	height: 100vh;
	/* wxss */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.blur-bg {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		position: relative;
		height: 80%;
	}
	.blur-image {
		filter: blur(2px); /* 模糊效果 */
		max-width: 100%;
		max-height: 80%;
		height: 100%;
	}
	.content {
		padding: 20rpx;
		text-align: center;
	}
	.title {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 40rpx;
	}
	.scan-image {
		max-width: 100%;
		height: auto;
	}
	.bottom-tip {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
	}
	.tip-text {
		font-size: 28rpx;
		color: #f90;
	}
	.cancel-btn {
		padding: 12rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
		font-size: 30rpx;
	}

	.scan-line {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px; /* 调整高度 */
		background: linear-gradient(to top, rgba(255, 165, 0, 0.8), rgba(255, 255, 255, 0.5));
		border-radius: 10px; /* 让边角更柔和 */
		animation: scanAnimation 1s linear infinite alternate; /* 动画调用 */
	}
	/* 定义扫描线上下移动动画 */
	@keyframes scanAnimation {
		0% {
			top: 0;
		}
		70% {
			top: 50%;
		}
		100% {
			top: 80%;
		}
	}
}
</style>
